<template>
    <!-- 
        el-form属性
            ref 对应ref名获取el-form组件
            model 表单数据对象,将数据传入到el-form组件内, 可以进行表单校验
            label-width  表单提示标签的宽度


        el-form-item 属性
            label 单提示标签的内容

     -->
    <!-- <el-form ref="form" class="my-form" label-position="left" :model="form" label-width="120px">
        <el-form-item label="名称">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
            <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="活动时间">
            <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.date1"
                    style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
                <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
            </el-col>
        </el-form-item>
        <el-form-item label="即时配送">
            <el-switch v-model="form.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="活动性质">
            <el-checkbox-group v-model="form.type">
                <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                <el-checkbox label="地推活动" name="type"></el-checkbox>
                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="特殊资源">
            <el-radio-group v-model="form.resource">
                <el-radio label="线上品牌商赞助"></el-radio>
                <el-radio label="线下场地免费"></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式">
            <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form> -->

    <div class="wrap">
        <LwClock ref="myClock"></LwClock>
        <p>
            <el-button @click="pauseHandler">暂停</el-button>
        </p>
    </div>
    
    <el-form ref="myForm" :model="info" label-width="80px" :rules="rules">
        <el-form-item label="用户名" prop="user">
            <el-input v-model="info.user"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pwd">
            <el-input v-model="info.pwd" type="password" show-password></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
            <el-input v-model="info.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
            <el-input v-model="info.email"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button @click="submitHandler">提交</el-button>
            <el-button @click="resetHandler">重置</el-button>
        </el-form-item>
    </el-form>



</template>
<script>

import LwClock from '@/components/LwClock.vue';
export default {
    data() {


        let validatePwd = (rules, value, callback) => {
            // this -> 当前vue实例的Proxy代理对象
            console.log("rules", rules);  // 当前校验对象
            console.log("value", value);  // 输入框的值
            console.log("callback", callback);  //工具函数  

            if (value) {
                if (value.length >= 6 && value.length <= 12) {
                    let reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,16}$/;
                    if(reg.test(value)){
                        callback();
                    }else{
                        callback("至少8-16个字符，至少1个大写字母，1个小写字母和1个数字，其他可以是任意字符");
                    }
                } else {
                    callback("密码需要在6-12位之间");
                }
            } else {
                callback("请输入密码");
            }
        }


        return {
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            info: {
                user: "",
                pwd: "",
                phone: "",
                email: "",
            },
            rules: {
                /* 
                rules的键名和el-form-item的prop属性保持一致
                rules的键名是一个数组,每一个对象都是一个校验规则
                        required: true  必填
                        message   校验失败时的提示信息
                        trigger   触发校验的手段(change blur input)
                        min
                        max

                        type   传入数据类型

                        validator  自定义校验规则, 是一个函数
                        
                
                */
                user: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                pwd: [
                    { validator: validatePwd,  trigger: 'blur' },
                ]
            }
        }
    },
    methods: {
        pauseHandler(){
            console.log(this.$refs.myClock);
        },
        onSubmit() {
            console.log('submit!');
        },
        submitHandler(){
            console.log(this.$refs.myForm)
            this.$refs.myForm.validate();
        },
        resetHandler(){
            console.log(this.$refs.myForm);

            this.$refs.myForm.resetFields();
        }
    },
    components:{
        LwClock,
    }
}
</script>

<style>
.my-form {
    width: 600px;
}
</style>